<template>
  <el-menu
    style="height: 100%"
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
    </div>
    <div class="flex-grow" />
    <el-sub-menu index="2">
      <template #title>{{ userName }}</template>
      <el-menu-item index="2-3">退出</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const activeIndex = ref("1");

const userName = ref<string>("");

const init = () => {
  const strUser = localStorage.getItem("user");
  if (strUser) {
    const user = JSON.parse(strUser);
    userName.value = user["username"];
  }
};
init();
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>
<style scoped>
.logo {
  height: 1em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.logo.element-plus:hover {
  filter: drop-shadow(0 0 2em #409effaa);
}
</style>
